<!-- 注册 -->
<template>
  <view class="container flex-items flex-column">
    <view class="login-logoBox">
      <image
        class="login-logo"
        :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/login/logo.png`"
      ></image>
    </view>
    <view>
      <view class="iphoneNum-box">
        <view class="box_title">手机号</view>
        <view>
          <input
            v-model="phone"
            class="iphoneNum-inputbox"
            placeholder-class="iphoneNum-input"
            type="number"
            maxlength="11"
            placeholder="请输入您的手机号"
          />
        </view>
      </view>
      <view class="code-box mar-top-20">
        <view class="box_title">图片验证码</view>
        <view class="flex justify-between items-center">
          <view>
            <input
              v-model="VerifyQuery.code"
              :maxlength="4"
              placeholder-class="codeNum-input"
              placeholder="请输入图片验证码"
            />
          </view>
          <view class="getcode">
            <image
              v-if="captcha"
              :src="captcha"
              mode=""
              @click="loadImage"
            ></image>
          </view>
        </view>
      </view>
      <view class="code-box mar-top-20">
        <view class="box_title">验证码</view>
        <view class="flex justify-between items-center">
          <view>
            <input
              v-model="RegisterQuery.code"
              :maxlength="4"
              class="codeNum-inputbox"
              placeholder-class="codeNum-input"
              placeholder="请输入验证码"
            />
          </view>
          <view
            :class="disabled === true ? 'on' : ''"
            :disabled="disabled"
            class="getcode"
            @click="codede"
          >
            {{ text }}
          </view>
        </view>
      </view>
    </view>
    <SubmitButtonNew
      width="650rpx"
	  height="78rpx"
	  radius="78rpx"
	  color="#fff"
	  bgColor="linear-gradient(90deg, #FF9000, #FF5000)"
      customClass="mar-top-100"
      text="注册"
      @submitEvent="onregister"
    />
    <view class="flex-row-plus mar-top-30" @click="gologin" style="color: #9F9F9F;font-size:24rpx;"
      >已有账号，去登录</view
    >
    <view class="agreement flex items-center">
      <image
        v-if="!agreement"
        :src="`${VUE_APP_STATIC_URL}ui-static/img/none.png`"
        mode=""
        @click="agreement = true"
      ></image>
      <!-- <image
        v-else
        src="@/ui-static/images/solid.png"
        mode=""
        @click="agreement = false"
      ></image>
	  <u-icon v-if="!agreement" name="checkmark-circle" color="#9F9F9F" size="40" @click="agreement = true"></u-icon> -->
	  <u-icon v-else name="checkmark-circle-fill" color="#FF5000" size="40" custom-style="margin-right: 10upx" @click="agreement = false"></u-icon>
      <text class="font-color-999">注册即代表同意</text>
      <text class="font-color-000" @click="protocol('app_user_agreement')"
        >《用户服务协议》</text
      >和
      <text class="font-color-000" @click="protocol('app_privacy_agreement')"
        >《个人隐私协议》</text
      >
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
import { request } from "../../utils/request";
import API from "../../config/api";
import { VUE_APP_STATIC_URL } from "@/config/api";
import { onLoad } from "@dcloudio/uni-app";
import { btnUseLoading } from "../../hooks/bntUseLoading";

const { btnShowLoading, btnHideLoading } = btnUseLoading();
const getCodeisWaiting = ref(false);
const phone = ref("");
const RegisterQuery = reactive({
  account: "",
  code: "",
});
const VerifyQuery = reactive({
  phone: "",
  type: "",
  code: "",
});
const agreement = ref(false);
const disabled = ref(false);
const text = ref("获取验证码");
let captcha = ref("");
const channelCode = ref('')
onLoad(options => {
  // 获取渠道码
  const keys = Object.keys(options);
  if(keys.length > 0){
    channelCode.value = keys[0]
  }
  captcha.value = API.GetCaptcha;
});
const loadImage = () => {
  captcha.value = API.GetCaptcha + "?" + Math.random();
};
/**
 * 注册账号
 */
const getRegister = async () => {
  let phoneCodeVerification =
    /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
  if (phone.value == "") {
    uni.showToast({
      title: "请输入手机号！",
      duration: 2000,
      icon: "none",
    });
  } else if (!phoneCodeVerification.test(phone.value)) {
    uni.showToast({
      title: "请输入正确的手机号！",
      duration: 2000,
      icon: "none",
    });
  } else if (RegisterQuery.code == "") {
    uni.showToast({
      title: "请获取验证码！",
      duration: 2000,
      icon: "none",
    });
  } else if (!agreement.value) {
    uni.showToast({
      title: "请先阅读并同意《用户服务协议和个人隐私协议》",
      duration: 2000,
      icon: "none",
    });
  } else {
    btnShowLoading();
    try {
      let data = {
        type: 1,
        phone: phone.value,
        verificationCode: RegisterQuery.code,
      }
      if(channelCode.value){
        data.channelCode = channelCode.value
      }
      const res = await request(
        API.Login,
          data,
        "POST"
      );
      // uni.hideLoading()
      uni.showToast({
        title: "注册成功！",
        duration: 2000,
        icon: "none",
      });
      const item = res.data;
      uni.setStorageSync("storage_key", item);
      btnHideLoading();
      setTimeout(function () {
        uni.switchTab({
          url: "/pages/tabbar/user/index",
        });
      }, 600);
    } catch (err) {
      btnHideLoading();
      uni.showToast({
        title: err.data.message,
        duration: 2000,
        icon: "none",
      });
    }
  }
};
/**
 * 获取验证码
 */
const getVerify = async () => {
  let phoneCodeVerification =
    /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
  if (phone.value == "") {
    uni.showToast({
      title: "请输入手机号！",
      duration: 2000,
      icon: "none",
    });
  } else if (!phoneCodeVerification.test(phone.value)) {
    uni.showToast({
      title: "请输入正确的手机号！",
      duration: 2000,
      icon: "none",
    });
  } else {
    if (!VerifyQuery.code)
      return uni.showToast({
        title: "请输入图片验证码！",
        duration: 2000,
        icon: "none",
      });
    VerifyQuery.phone = phone.value;
    try {
      const res = request(
        API.Verify,
        {
          code: VerifyQuery.code,
          phone: VerifyQuery.phone,
        },
        "GET"
      );
      sendCode();
    } catch (err) {
      uni.showToast({
        title: err.data.message,
        icon: "none",
        duration: 1000,
      });
    }
  }
};
// 注册
const onregister = () => {
  getRegister();
};
// 获取验证码
const codede = () => {
  if (disabled.value) return;
  getVerify();
};
const getCode = () => {
  uni.hideKeyboard();
  if (getCodeisWaiting.value) {
    return;
  }
  if (phone.value == "" || phone.value == null) {
    uni.showToast({
      title: "手机号不能为空",
      icon: "none",
    });
    return false;
  } else if (
    !/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
      phone.value
    )
  ) {
    uni.showToast({
      title: "输入的手机号错误",
      icon: "none",
    });
    return false;
  }
  getCodeisWaiting.value = true;
};
/**
 * 跳转登录
 */
const gologin = () => {
  uni.navigateTo({
    url: "login",
  });
};
/**
 * 多商户用户协议
 * @param type
 */
const protocol = (type) => {
  uni.navigateTo({
    url: "protocol?type=" + type,
  });
};
const sendCode = () => {
  if (disabled.value) return;
  disabled.value = true;
  let n = 60;
  text.value = "剩余 " + n + "s";
  const run = setInterval(() => {
    n = n - 1;
    if (n < 0) {
      clearInterval(run);
    }
    text.value = "剩余 " + n + "s";
    if (text.value < "剩余 " + 0 + "s") {
      disabled.value = false;
      text.value = "重新获取";
    }
  }, 1000);
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #ffffff;

  .login-logoBox {
    margin: 100rpx 0;

    .login-logo {
      width: 218rpx;
      height: 220rpx;
    }
  }

  .box_title {
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 30rpx;
    color: #3b3b3b;
    margin-bottom: 20rpx;
  }

  .iphoneNum-box {
    border-bottom: 1rpx solid #f3f4f5;
    // height: 100rpx;
    width: 600rpx;

    .loginIcon {
      width: 40rpx;
      height: 53rpx;
    }

    input {
      font-size: 28rpx;
    }

    .iphoneNum-input {
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
    }

    .iphoneNum-inputbox {
      height: 80rpx;
    }
  }

  .code-box {
    border-bottom: 1rpx solid #f3f4f5;
    // height: 100rpx;
    // width: 350rpx;
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    // align-items: center;

    .loginIcon {
      width: 44rpx;
      height: 50rpx;
    }

    input {
      font-size: 28rpx;
    }

    .code-lab {
      width: 200rpx;
    }

    .codeNum-input {
      color: #999999;
      font-size: 28rpx;
      font-weight: 400;
      width: 300rpx;
    }

    .codeNum-inputbox {
      width: 300rpx;
    }
  }

  .getcode {
    height: 80rpx;
    width: 230rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    margin-left: 20rpx;
    color: #FF5000;
    image {
      width: 100%;
      height: 100%;
    }
	&[disabled=true]{
		color: #9F9F9F;
	}
  }

  .getcodeActive {
    background-color: #dddddd;
    height: 100rpx;
    width: 220rpx;
    border-radius: 44rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 20rpx;
    color: #333333;
  }

  .agreement {
    margin: 100rpx 50rpx;
    line-height: 50rpx;
    font-size: 24rpx;
    image {
      width: 34rpx;
      height: 34rpx;
      margin-right: 15upx;
    }
  }
}
</style>
